<!--
 * Date: 2018年10月23日 13:28:06
 * LastEditors: lvyou
 * LastEditTime: 2019年11月28日 09:36:04
 * FilePath: \youlinweb-master\src\pages\pointsmall\exchangerecode.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
<!--中奖纪录 及 兑换记录-->
  <div>
    <ylheader :leftsvg='true' :title="title" ></ylheader>
    <ul class="er-t a-c">
      <li v-for="(items,index) in recodetitle" :key="index" :style="{'flex':index==0?1.5:1}">{{items}}</li>
    </ul>
      <div class="loadmore-container" ref="exchangerecodeWrapper" style="height:87vh">
        <div class="loadmore-ul">
          <div class="shuoshuo-new" v-if="listnodata">
            <span class="yl-2kong nosvg">
              <span class="path1">
                <span class="path2">
                  <span class="path3">
                    <span class="path4">
                      <span class="path5">
                        <span class="path6">
                          <span class="path7">
                            <span class="path8">
                              <span class="path9"></span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
            <span class="no-text">还没有相关记录哦~</span>
          </div>
          <ul class="er-c a-c">
            <li v-for="(items,index) in list" :key="index" class="a-c">
                <span class="time" v-if="tag==0">{{items.createTime}}</span>
                <span class="prize one-line" v-if="tag==0">{{items.prizeName}}</span>
                <span class="time" v-if="tag==1">{{items.createTimeStamp}}</span>
                <span class="prize one-line" v-if="tag==1">{{items.goodsName}}</span>
                <div v-if="(tag==1&&items.state==1)" class="notrecieve h-c"> 
                  <div  class="text a-c recievetext">已取消</div>
                </div>
                <!--isReceived是否接收  0未接收 1接收 2无-->
                <div v-else-if="(tag==0&&items.isReceived==0)||(tag==0&&items.prizeType == 3&&items.isReceived==1&&items.isUsed==0)" class="notrecieve h-c" @click="notrecieve(items)"> 
                  <div  class="text a-c">未领取</div>
                </div>
                <div v-else-if="(tag==0&&items.isReceived==1)" class="notrecieve h-c" @click="haverecieve(items)"> 
                  <div  class="text a-c recievetext">已领取</div>
                </div>
                <span v-else-if="tag==1&&items.state==0">正常</span>
                <span v-else>无</span>
            </li>
          </ul>
          <p style="padding-bottom:1rem"></p>
        </div>
      </div>
  </div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
export default {
name:"exchangerecode",
  data(){
      return{
        drawId:"",
        title:"",
        recodetitle:[],
        list:[],
        page:1,
        limit:10,
        totalPage:'',
        is_r:false,
        listnodata:false,
        tag:'',//0中奖纪录 1兑换记录
      }
  },
  components:{
      api,
      ylheader,
  },
  mounted(){
    this.tag=this.$route.query.tag;
    if(this.$route.query.tag==0){
      this.title = "中奖记录";
      this.recodetitle = ["抽奖时间","奖品","状态"];
        this.myrecord().then(res=>{
        this.initScroll();
      });
    }else if(this.tag==1){
      this.title = "兑换记录";
      this.recodetitle = ["兑换时间","兑换商品","状态"];
      this.queryExchangeRecord().then(res=>{
        this.initScroll();
      });
    }
  },
  methods:{
    //未领取
    notrecieve(items){
      if(this.tag==1){
        if(items.goodsType==1){
          this.$router.push({path:"/address",query:{id:items.id,tag:0}});
        }else if(items.goodsType==2){
          this.$router.push({path:"/writephone",query:{id:items.id,tag:0}});
        }
      }else if(this.tag==0){//
     /*
     if (prizeType == 3 && isUsed == 0 && isReceived == 1) {
          未领取   -->展示页
        }else if (isReceived == 0) {
          未领取   -->填写页
        }else if(isReceived==1){
          已领取   -->展示页
    }*/
          if(items.prizeType==1&&items.isReceived==0){//快递未填写
            this.$router.push({path:"/address",query:{id:items.id,tag:1}});
          }else if(items.prizeType==3&&items.isReceived==1&&items.isUsed==0){//自取已填写
            this.$router.push({path:"/showaddress",query:{id:items.id,tag:1,typeValue:items.typeValue,name:items.name,phone:items.mobile}});
          }else if(items.prizeType==3&&items.isReceived==0){//自取未填写
            this.$router.push({path:"/shipaddress",query:{id:items.id,tag:0,typeValue:items.typeValue}});
          }
      }
    },
    //已取
    haverecieve(items){
       if(this.tag==1) {
         if(items.goodsType==1){
          this.$router.push({path:"/showaddress",query:{id:items.id,tag:0,name:items.receiveName,phone:items.receivePhone,address:items.receiveAddress}});
          }else if(items.goodsType==2){
            this.$router.push({path:"/cellphone",query:{id:items.id,tag:0,phone:items.receivePhone}});
          }
       }else if(this.tag==0){
          if(items.prizeType==3){//自取
          this.$router.push({path:"/showaddress",query:{id:items.id,tag:1,typeValue:items.typeValue,name:items.name,phone:items.mobile}});
          }else if(items.prizeType==1){//快递
            this.$router.push({path:"/showaddress",query:{id:items.id,tag:0,name:items.name,phone:items.mobile,address:items.area+items.address}});
          }
       }
    },
  haveDraw() {
     let p = new Promise((resolve, reject) => {
       api.haveDraw().then(res => {
         if (res.success) {
           this.drawId = res.drawId;
           resolve("中奖id...");
         }
       })
     })
     return p;
    },
    //中奖纪录
    myrecord(){
       let p = new Promise((resolve, reject) => {
          const params ={page:this.page,limit:this.limit,drawId:''}
          api.myrecord(params).then(res=>{
            if(res.success){
                this.totalPage = res.data.totalPage
                this.list = this.is_r
                    ? [...this.list, ...res.data.list]
                    : res.data.list;
                if(this.page<res.data.totalPage){
                    this.is_r=false;
                }
                if(this.list.length==0){
                    this.listnodata = true;
                } else{
                    this.listnodata = false;
                }
                if(this.myscroll){
                  this.$nextTick(() => {
                    this.myscroll.refresh();
                  });
                } 
                resolve("中奖纪录...");
            }
          })
       })
       return p;
    },
    //兑换记录
    queryExchangeRecord(){
      let p = new Promise((resolve, reject) => {
         const params ={page:this.page,limit:this.limit}
         api.queryExchangeRecord(params).then(res=>{
           if(res.success){
               this.totalPage = res.data.totalPage
               this.list = this.is_r
                   ? [...this.list, ...res.data.list]
                   : res.data.list;
               if(this.page<res.data.totalPage){
                   this.is_r=false;
               }
               if(this.list.length==0){
                   this.listnodata = true;
               } else{
                   this.listnodata = false;
               }
               if(this.myscroll){
                 this.$nextTick(() => {
                   this.myscroll.refresh();
                 });
               } 
               resolve("中奖纪录...");
           }
         })
       })
       return p;
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let exchangerecodeWrapper = this.$refs.exchangerecodeWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(exchangerecodeWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if ((this.y <= (this.wrapperH - this.scroller.clientHeight-50))&& _this.is_r == false) {
                _this.is_r = true;
                if(_this.page<_this.totalPage){
                  _this.page++;
                  if(_this.tag==0){
                    _this.myrecord();  
                  }else if(_this.tag==1){
                    _this.queryExchangeRecord();  
                  }
                }
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
  }
}
</script>
<style lang="less" scoped>
.er-t{
  flex-direction: row;
  height: 0.6rem;
  border-bottom: 1px solid #e6e6e6;
  background: #ffffff;
  font-size: 0.3rem;
  color: #333333;
  font-weight: bold;
  height: 0.88rem;
  font-family: PingFangSC-Semibold, sans-serif;
  li{
    display: inline-block;
    text-align: center;
    flex: 1;
  }
}
.er-c{
  flex-direction: column;
  background: #ffffff;
  color: #333333;
  li{
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    height: 0.88rem;
    text-align:center;

      .time{
        flex: 1.5;
      }
      .prize{
        font-family: PingFangSC-Medium, sans-serif;
        font-weight:bold
      }
      .notrecieve{
        flex: 1;
        .text{
          background: #FC8064;
          height: 0.5rem;;
          width: 1.4rem;
          color: #ffffff;
          border-radius: 12px;
        }
        .recievetext{
          background:rgba(242,239,239,1);
          color: #666666;
        }
      }
      span{
        flex: 1;
        font-size: 0.26rem;
      }
 

  }
}
</style>


